<template>
  <view class="">
    <view class="invite" v-if="inviteShow && loading">
      <view class="invite-header" :style="{ backgroundImage: 'url(' + imgHost + '/statics/images/extension.jpg' + ')' }">
        <view class="swipers">
          <swiper :indicator-dots="false" autoplay="true" interval="2500" duration="500" vertical="true" circular="true">
            <block v-for="(item, index) in agentInfoData.list" :key="index">
              <swiper-item @touchmove.stop="stopTouchMove">
                <view class="line1"
                  >恭喜{{ item.nickname ? item.nickname : '用户' }} <text class="color_ye"> 成功赚取{{ item.price }}</text>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
      <view class="box">
        <view class="box-title-sty">
          <view class="box-title" :style="{ backgroundImage: 'url(' + imgHost + '/statics/images/title-bag.png' + ')' }"> 我的收益 </view>
          <view class="benefit">
            <text class="iconfont icon-zhu"></text>
            <text>获得收益</text>
            <text class="num">{{ agentInfoData.price || 0 }}</text>
            <text>元</text>
          </view>

          <view class="box-btn acea-row row-between-wrapper">
            <view class="item">
              <view class="text"> 专职经纪人 </view>
              <view class="num">
                {{ intermediary || 0 }}
              </view>
            </view>
            <view class="item">
              <view class="text"> 兼职经纪人 </view>
              <view class="num">
                {{ pluralism || 0 }}
              </view>
            </view>
            <view class="item">
              <view class="text"> 房东 </view>
              <view class="num">
                {{ landlord || 0 }}
              </view>
            </view>
            <view class="item">
              <view class="text"> 租房 </view>
              <view class="num">
                {{ users || 0 }}
              </view>
            </view>
          </view>
        </view>

        <view class="tab">
          <view class="item" @click="getList(0)">
            <view class="text" :class="sel == 0 ? 'on' : ''">我邀请的好友</view>
            <view class="line" :class="sel == 0 ? 'on' : ''"></view>
          </view>
          <view class="item" @click="getList(1)">
            <view class="text" :class="sel == 1 ? 'on' : ''">邀请我的好友</view>
            <view class="line" :class="sel == 1 ? 'on' : ''"></view>
          </view>
        </view>
        <view class="list" v-if="userList.length">
          <view class="item acea-row row-between-wrapper" v-for="(item, index) in userList" :key="index">
            <view class="item-l">
              <view class="avatar">
                <image :src="item.avatar" mode=""></image>
              </view>
              <view class="" v-if="type == 1">[UID:{{ item.uid }}]{{ item.real_name }}</view>
              <view class="" v-else>[UID:{{ item.friends_uid }}]{{ item.real_name }}</view>
            </view>
            <view class="right" v-if="item.role == 0 && type == 0">租房</view>
            <view class="right" v-if="item.role == 1 && type == 0">房东</view>
            <view class="right" v-if="item.role == 2 && type == 0">兼职经纪人</view>
            <view class="right" v-if="(item.role == 3 || item.role == 4 || item.role == 5) && type == 0">专职经纪人</view>
            <view class="item-r">{{ item.spread_time }}</view>
          </view>

          <template v-if="userList.length">
            <view class="more" @tap="showAll" v-if="userList.length < total"
              >查看更多
              <text class="iconfont icon-xiangxia"></text>
            </view>
          </template>
        </view>
        <view class="no-thing" v-if="(!userList.length && sel == 0) || (!userList.length && sel == 1)">
          <view class="no-thing-img">
            <image :src="imgHost + '/statics/images/no-thing.png'" mode="aspectFit"></image>
          </view>
          <view class="pl20">
            {{ sel == 0 ? '暂无已邀请好友，快去邀请吧' : '暂无签约好友，快去邀请签约吧' }}
          </view>
        </view>
      </view>
      <view class="box">
        <view class="box-title-sty white">
          <view class="box-title" :style="{ backgroundImage: 'url(' + imgHost + '/statics/images/title-bag.png' + ')' }">活动规则</view>
        </view>
        <view class="agreement" v-html="agentInfoData.agreement"></view>
      </view>
      <view class="footer">
        <view class="click">
          <image src="../static/click.png" mode=""></image>
        </view>
        <view style="display: flex; justify-content: space-between">
          <view style="flex: 1; margin-right: 20rpx" class="cancellation flex-aj-center" @click="invite"> 扫码邀请 </view>
          <view style="flex: 1" class="cancellation flex-aj-center" @click="setShareInfo"> 分享注册 </view>
        </view>
      </view>
    </view>
    <view class="no-invite" v-else-if="!inviteShow && loading">
      <image :src="imgHost + '/statics/images/no-thing.png'" mode="aspectFit"></image>
      <text>商家暂未上架活动哦～</text>
    </view>
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <view class="confirm" @click="confirm('1')">房东</view>
        <view class="confirm" @click="confirm('2')">中介</view>
        <view class="confirm" @click="confirm('3')">租客</view>
      </view>
    </uni-popup>
    <home v-if="navigation"></home>
    <!-- <shareInfo @setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></shareInfo> -->
    <couponWindow :window="window" :user="userInfo" :couponImage="userInfo.urlCode" @onColse="onColse" @ShareInfo="ShareInfo"></couponWindow>
    <canvas class="canvas" :style="{ height: hg + 'px' }" :canvas-id="'myCanvas' + index"></canvas>
    <zb-code
      ref="qrcode"
      :show="codeShow"
      :cid="cid"
      :val="val"
      :size="size"
      :unit="unit"
      :background="background"
      :foreground="foreground"
      :pdground="pdground"
      :icon="icon"
      :iconSize="iconsize"
      :onval="onval"
      :loadMake="loadMake"
      @result="qrR"
    />
  </view>
</template>

<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<script>
import zbCode from '@/components/zb-code/zb-code.vue'
import { getUserInfo, agentUserList, agentInfo } from '@/api/user.js'
import colors from '@/mixins/color.js'
import home from '@/components/home'
import { toLogin } from '@/libs/login.js'
import { mapGetters } from 'vuex'
import { HTTP_REQUEST_URL } from '@/config/app'
import couponWindow from '@/components/couponWindow'
import shareInfo from '../components/shareInfo/index.vue'
// import { getWechatConfig } from '../../../api/public'

// const app = getApp()
export default {
  components: {
    home,
    couponWindow,
    shareInfo,
    zbCode
  },
  mixins: [colors],
  data() {
    return {
      inviteShow: true,
      loading: true,
      sel: 0,
      userList: [],
      agentInfoData: {},
      page: 1,
      limit: 5,
      total: 0,
      imgHost: HTTP_REQUEST_URL,
      isShowAuth: false,
      userInfo: {},
      window: true,

      intermediary: 0,
      pluralism: 0,
      landlord: 0,
      users: 0,
      nowUid: '',
      shareInfoStatus: false,
      instance: {},
      config: {},
      // 二维码参数
      codeShow: false,
      cid: '1',
      ifShow: true,
      val: '', // 要生成的二维码值
      size: 200, // 二维码大小
      unit: 'upx', // 单位
      background: '#FFF', // 背景色
      foreground: '#000', // 前景色
      pdground: '#000', // 角标色
      icon: '', // 二维码图标
      iconsize: 40, // 二维码图标大小
      lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
      onval: true, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: '', // 二维码生成后的图片地址或base64
      codeSrc: '',
      wd: 0,
      hg: 0,
      qrcode: ''
    }
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
        }
      },
      deep: true
    }
  },
  onLoad(option) {
    // console.log('wxxxxx', wx)
    this.nowUid = option.uid
    this.type = option.type || 0
    if (this.isLogin) {
      this.getAgentList(0)
      this.getAgentInfo()
      this.getUserInfo()
    }
  },
  onShow() {
    uni.removeStorageSync('form_type_cart')
    if (!this.isLogin) {
      toLogin()
    }
  },
  mounted() {
    this.setShareInfoStatus()
  },
  methods: {
    confirm(type) {
      if (type == 1) {
        console.log('生成房东邀请海报', `https://mp.tianxuan88.com/users/landlord_share/index?uid=${this.userInfo.uid}`)
        this.val = `https://mp.tianxuan88.com/users/landlord_share/index?uid=${this.userInfo.uid}`
        console.log('>>>>>>>>>>>>获取图片《《《《《', this.val)
      } else if (type == 2) {
        console.log('生成中介邀请海报', `https://mp.tianxuan88.com/users/channel_share/index?uid=${this.userInfo.uid}`)
      } else if (type == 3) {
        console.log('生成租客邀请海报', `https://mp.tianxuan88.com/users/tenant_share/index?uid=${this.userInfo.uid}`)
      }
    },
    onColse() {
      this.window = false
    },
    /**
     * 获取个人用户信息
     */
    getUserInfo() {
      let that = this
      getUserInfo({ uid: that.nowUid }).then((res) => {
        console.log('>>>>', res)
        that.$set(that, 'userInfo', res.data)
      })
    },

    setShareInfo() {
      this.$refs.popup.open('center')
      // let that = this
      // // 这里假设您已经成功获取了用户信息并存储在 this.userInfo 中
      // getWechatConfig().then((res) => {
      //   console.log('微信配置信息', res)
      //   jWeixin.config({
      //     debug: false, // 开启调试模式
      //     appId: res.data.appId, // 必填，公众号的唯一标识
      //     timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      //     nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      //     signature: res.data.signature, // 必填，签名
      //     jsApiList: res.data.jsApiList // 必填，需要使用的 JS 接口列表
      //   })
      //   console.log('微信配置完成', jWeixin)
      //   jWeixin.ready(function (res) {
      //     // 在这里调用 API
      //     console.log('微信JS-SDK配置成功', res)
      //     that.configShare()
      //   })
      //   jWeixin.error(function (res) {
      //     // config信息验证失败会执行error函数，如签名过期(7200s)等原因触发error函数
      //     console.error('微信JS-SDK配置失败', res)
      //   })
      // })
    },

    // 配置微信分享
    configShare() {
      console.log('1111111')
      const shareData = {
        title: '天选之址',
        desc: '邀请您一起来赚钱',
        link: 'https://mp.tianxuan88.com/pages/index/index',
        imgUrl: this.userInfo.urlCode,
        success() {
          console.log('分享成功')
        },
        fail(err) {
          console.error('分享失败', err)
        }
      }
      jWeixin.onMenuShareTimeline(shareData) // 分享到朋友圈
      jWeixin.onMenuShareAppMessage(shareData) // 分享给朋友
      jWeixin.onMenuShareQQ(shareData) // 分享到QQ
      jWeixin.onMenuShareWeibo(shareData) // 分享到微博
      console.log('22222')
    },
    setShareInfoStatus() {
      this.shareInfoStatus = false
      // this.$wechat
      //   .wechat()
      //   .then((instance) => {
      //     this.instance = instance
      //     console.log('微信实例:', instance)
      //     instance.ready(() => {
      //       console.log('ready 方法被调用')
      //       this.setShareInfo()
      //     })
      //   })
      //   .catch((error) => {
      //     console.error('获取微信配置失败', error)
      //   })
    },
    // getWxConfig() {
    //   return new Promise((resolve, reject) => {
    //     this.$http
    //       .get('api/wechat/getWxConfig', {
    //         url: location.href.split('#')[0]
    //       })
    //       .then((res) => {
    //         this.$wechat.init(res.data)
    //         resolve(res.data)
    //       })
    //       .catch((err) => {
    //         reject(err)
    //       })
    //   })
    // },
    // //#ifdef H5
    // ShareInfo(data) {
    //   console.log('111', data)
    //   let href = location.href
    //   if (this.$wechat.isWeixin()) {
    //     getUserInfo().then((res) => {
    //       href = href.indexOf('?') === -1 ? href + '?spid=' + res.data.uid : href + '&spid=' + res.data.uid
    //       let configAppMessage = {
    //         desc: '邀请您一起来赚钱',
    //         title: '天选之址',
    //         link: data.link,
    //         imgUrl: data.imageUrl
    //       }
    //       this.$wechat
    // .wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configAppMessage)
    //         .then((res) => {
    //           console.log('res---', res)
    //         })
    //         .catch((err) => {
    //           console.log('err ===', err)
    //         })
    //     })
    //   } else {
    //     console.log('非微信浏览器')
    //   }
    // },
    // setShareInfo: function () {
    //   console.log('---', this.userInfo.urlCode)
    //   let href = location.href
    //   let configAppMessage = {
    //     desc: encodeURIComponent('邀请您一起来赚钱'),
    //     title: encodeURIComponent('天选之址'),
    //     link: encodeURIComponent(href),
    //     imgUrl: this.userInfo.urlCode
    //   }
    //   console.log('分享', configAppMessage)
    //   this.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configAppMessage)
    // },
    // //#endif

    getList(index) {
      this.sel = index
      this.userList = []
      this.page = 1
      this.getAgentList(index)
    },
    invite() {
      this.window = true
    },
    getAgentList(type) {
      let that = this
      agentUserList(type, that.page, that.limit).then((res) => {
        console.log('>>>>>好友列表', res)
        that.total = res.data.count
        let len = res.data.list.length
        let userListNew = []
        let userListData = res.data.list
        userListNew = that.userList.concat(userListData)
        that.$set(that, 'userList', userListNew)

        that.intermediary = res.data.data.intermediary
        that.pluralism = res.data.data.pluralism
        that.landlord = res.data.data.landlord
        that.users = res.data.data.users
      })
    },
    getAgentInfo() {
      agentInfo().then((res) => {
        console.log('>>>>>收益用户', res.data)
        this.agentInfoData = res.data
      })
    },
    showAll: function () {
      this.page++
      this.getAgentList(this.sel)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../static/click.css';
.popup-content {
  // padding: 30rpx 50rpx 10rpx;
  // width: 300px;
  // background-color: #fff;
  .confirm {
    width: 300rpx;
    height: 80rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
    background-color: #fff;
    margin-bottom: 40rpx;
    border-radius: 20rpx;
  }
}
.invite {
  background-color: #e74435;
  min-height: 100vh;
  padding: 0 0 80rpx 0;

  .invite-header {
    width: 100%;
    height: 584rpx;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;

    .swipers {
      width: 544rpx;
      height: 40rpx;
      line-height: 40rpx;
      background: rgba(183, 4, 0, 1);
      border-radius: 24rpx;
      margin: auto;
      overflow: hidden;
      position: absolute;
      left: 50%;
      top: 14%;
      transform: translate(-50%);

      /* 50%为自身尺寸的一半 */
      .line1 {
        text-align: center;
      }

      swiper {
        height: 100%;
        width: 100%;
        overflow: hidden;
        font-size: 24rpx;
        color: #ffffff;
      }

      .color_ye {
        color: #ffe39f;
      }
    }
  }

  .notice {
    position: absolute;
  }

  .box {
    margin: -100rpx 30rpx 160rpx 30rpx;
    width: 690rpx;
    background-color: #fff;
    z-index: 999;
    border-radius: 12rpx;

    .agreement {
      padding: 0 30rpx 30rpx 30rpx;
      word-wrap: break-word;
      text-align: justify;
      /deep/p {
        margin-bottom: 8rpx;
        line-height: 60rpx;
      }
    }

    .box-title-sty {
      background-color: #fef7f6;
      padding-bottom: 42rpx;
      border-radius: 12rpx 12rpx 0 0;

      .benefit {
        text-align: center;
        color: #333333;
        font-size: 24rpx;

        .icon-zhu {
          color: #e93323;
          padding-right: 16rpx;
        }

        .num {
          color: #e93323;
          font-size: 54rpx;
          padding: 0 8rpx;
          font-weight: bold;
        }
      }

      .box-btn {
        text-align: center;
        margin: 50rpx 30rpx 0;

        .item {
          .text {
            color: #777777;
            font-size: 24rpx;
            margin-bottom: 20rpx;
          }
          .num {
            color: #333333;
            font-size: 36rpx;
            font-weight: bold;
          }
        }
      }
    }

    .white {
      background-color: #fff;
    }

    .tab {
      display: flex;
      padding: 36rpx;
      color: #e93323;
      font-size: 32rpx;

      .item {
        width: 100%;
        text-align: center;

        .line {
          margin: 20rpx auto 0 auto;
          width: 106rpx;
          height: 2px;
          border-radius: 1px;
        }

        .line.on {
          background: #e93323;
        }

        .on {
          font-weight: bold;
        }
      }
    }

    .no-thing {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16rpx 0 52rpx;
      color: #333;

      .no-thing-img {
        width: 48rpx;
        height: 48rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .pl20 {
        padding-left: 20rpx;
      }
    }

    .list {
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14rpx 30rpx;

        .item-l {
          display: flex;
          align-items: center;
          color: #333333;
          font-size: 28rpx;
          width: 300rpx;

          .avatar {
            width: 56rpx;
            height: 56rpx;
            margin-right: 18rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
        }

        .right {
          font-size: 20rpx;
          width: 100rpx;
          text-align: left;
        }

        .item-r {
          color: #999999;
          font-size: 22rpx;
        }
      }

      .more {
        font-size: 24rpx;
        color: #282828;
        text-align: center;
        height: 90rpx;
        line-height: 90rpx;
      }
    }

    .box-title {
      transform: translateY(-20rpx);
      margin: 0 auto;
      width: 380rpx;
      height: 76rpx;
      background-repeat: no-repeat;
      background-size: cover;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-weight: 500;
    }
  }

  .footer {
    text-align: center;
    z-index: 999;
    width: 100%;
    background-color: #e93323;
    position: fixed;
    padding: 36rpx 30rpx;
    box-sizing: border-box;
    bottom: 0rpx;

    .trip {
      color: #999999;
      font-size: 24rpx;
      margin: 24rpx 0;
    }

    .click {
      width: 66rpx;
      height: 74rpx;
      position: absolute;
      right: 44rpx;
      bottom: 8rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .cancellation {
      height: 45px;
      color: #e93323;
      font-weight: bold;
      font-size: 36rpx;
      background: linear-gradient(180deg, #fffcf6 0%, #ffe297 100%);
      border-radius: 25px;
    }
  }
}

// .mask {
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	right: 0;
// 	bottom: 0;
// 	background-color: rgba(0, 0, 0, 0.8);
// 	z-index: 9;
// }

// .share-box {
// 	z-index: 1300;
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	width: 100%;
// 	height: 100%;

// 	image {
// 		width: 100%;
// 		height: 100%;
// 	}
// }

.no-invite {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  color: #ccc;
}

[v-cloak] {
  display: none;
}
</style>
